<template>
    <div class="gongyingshang-view">
      <el-card>
        <div class="toolbar">
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <!-- <el-button @click="handleImport">导入</el-button> -->
          <el-input
            v-model="page.CustomerNo"
            placeholder="请输入供应商编号"
           style="width: 220px;"
           class="search-input"
          >
           <!-- 
            clearable
            @keyup.enter="handleSearch" -->
            <!-- <template #append>
              <el-button icon="el-icon-search" @click="handleSearch"></el-button>
            </template> -->
          </el-input>
          <el-button type="primary" @click="fetchData()">查询</el-button>
        </div>
        <el-table
          :data="tableData"
          border
          style="width: 100%; margin-top: 16px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" />
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="customerNo" label="供应商编号" />
          <el-table-column prop="customerFullName" label="供应商名称" />
          <el-table-column prop="companyName" label="公司名称" />
          <el-table-column prop="companyNature" label="供应商类别" />
          <el-table-column prop="registeredLocationDetail" label="供应商等级" />
          <el-table-column prop="industry" label="所属行业" />
          <el-table-column prop="region" label="所在地区" />
          <el-table-column prop="legalPerson" label="采购人员" />
          <el-table-column prop="department" label="所在部门" />
          <el-table-column label="操作" width="160">
            <template #default="scope">
              <el-button type="success" size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
              <el-button type="primary" size="small" @click="handleView(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[15, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text='上一页'
      next-text='下一页'
    />
  </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage,ElMessageBox } from 'element-plus'
  import axios from 'axios'
  
  const router = useRouter()
  const search = ref('')
  const tableData = ref([])
  const total = ref(101)
  const pageSize = ref(5)
  const currentPage = ref(1)
  const jumpPage = ref(1)
  
  const page=reactive({
    CustomerNo:'',
    pageindex:1,
    pagesize:15,
    totalpage:0,
    totalcount:0
  })
  const fetchData = () => {
    axios({
        url:'http://localhost:5027/api/OutSourc/QueryCoustmore',
        method:'get',
        params:{
            CustomerNo:page.CustomerNo,
            pageindex:page.pageindex,
            pagesize:page.pagesize 
        }
    })
    .then(res=>{
        if(res.data.code==101){
            console.log('供应商列表',res.data.list);
            tableData.value = res.data.list;
            page.totalpage = res.data.totalpage;
            page.totalcount = res.data.totalcount;  
        }
    })
   
  }
  
  onMounted(()=>{
    fetchData();
  })
  
  const handleAdd = () => {
    router.push('/AddGongyingshang')
  }
  const handleImport = () => {
    ElMessage.info('导入功能开发中')
  }
  const handleSearch = () => {
    ElMessage.info('搜索功能开发中')
  }
  const handleSelectionChange = (val) => {
    // 可用于批量操作
  }
  const handleEdit = (row) => {
    router.push({
        name:'UpdateGongyingshang',
        query:{
            ...row
        }
    })
  }
  const handleDelete = (row) => {
  console.log(row.id);
  ElMessageBox.confirm('确定删除该数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(() => {
    axios({
      url:'http://localhost:5028/api/Outsour/DeleeteCustomer',
      method:'post',
      data:{
        id:row.id
      }
  })
  .then(res=>{
    if(res.data.code==101){
      ElMessage.success("操作成功");
      fetchData();
    }
  })})
  .catch(() => {
    ElMessage.info('已取消删除');
  });
  }
  const handleView = (row) => {
    router.push({
        name:'chakanview',
        query:{
            ...row
        }
    })
  }
  const handlePageChange = (page) => {
    currentPage.value = page
    fetchData()
  }
  const handleJump = () => {
    if (jumpPage.value >= 1 && jumpPage.value <= Math.ceil(total.value / pageSize.value)) {
      currentPage.value = jumpPage.value
      fetchData()
    }
  }
 
  const handleSizeChange = (val) => {
    page.pagesize=val;
    fetchData();
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    page.pageindex=val;
    fetchData();
  console.log(`current page: ${val}`)
}
  </script>
  
  <style scoped>
  .gongyingshang-view {
    padding: 20px;
  }
  .toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .search-input {
    width: 220px;
    margin-left: auto;
  }
  .table-mode-btn {
    margin-left: 10px;
  }
  .pagination-bar {
    display: flex;
    align-items: center;
    margin-top: 16px;
    gap: 8px;
    justify-content: flex-end;
  }
  </style>